import { Panel, LayerLink } from 'comps/common';
import { Link } from 'react-router';
import RunnableGroup from 'comps/runnable-group';
import _ from 'lodash';

const UserDevTeams = ({ isFetching, runnableGroups, style }) => {
  return (
    <Panel style={style} title={`工作中的项目 (${runnableGroups.length})`} spinner={isFetching} headExtra={<Link to='/console/my-runnable-groups'>全部</Link>}>
      <ul className='simple-list list'>
        {_.isEmpty(runnableGroups)
          ? (<li>还没有项目</li>)
          : runnableGroups.map(({ id, name }) => {
            return (
              <li key={id}>
                <LayerLink component={RunnableGroup} data={{ id }} title={`项目（${name}）详情`}>{name}</LayerLink>
              </li>
            );
          })
        }
      </ul>
    </Panel>
  );
};

export default UserDevTeams;
